var r1 = document.querySelector('.r1')
var r2 = document.querySelector('.r2')
r1.onmouseover=function(){
    r2.style.display = 'block';
    r1.style.backgroundColor = 'white'
}
r1.onmouseout = function(){
    r2.style.display = 'none'
    r1.style.backgroundColor = ''
}
var shang = document.querySelector('.shang')
var shang1 = document.querySelector('.shang1')
shang.onmouseover = function(){
    shang1.style.display = 'block'
    shang.style.backgroundColor = 'white'
}
shang.onmouseout = function(){
    shang1.style.display = 'none'
    shang.style.backgroundColor=''
}
var mei = document.querySelector('.mei')
var mei1 = document.querySelector('.mei1')
mei.onmouseover = function(){
    mei1.style.display = 'block'
    mei.style.backgroundColor = 'white'
}
mei.onmouseout = function(){
    mei1.style.display = 'none'
    mei.style.backgroundColor=''
}
var movie3 = document.querySelector('.movie3')
var m1 = document.querySelector('.m1')
var m2 = document.querySelector('.m2')
var m3 = document.querySelector('m3')
movie3.onmouseover = function(){
    m1.style.display = 'block'
    m2.style.display = 'block'
}
movie3.onmouseout = function(){
    m1.style.display = 'none'
    m2.style.display = 'none'
}
var poo1 = document.querySelector('.poo1')
var poo2 = document.querySelector('.poo2')
var poo3 = document.querySelector('.poo3')
var poo4 = document.querySelector('.poo4')
var poo5 = document.querySelector('.poo5')
var poo6 = document.querySelector('.poo6')
var poo7 = document.querySelector('.poo7')
var poo8 = document.querySelector('.poo8')
var poo9 = document.querySelector('.poo9')
var poo10= document.querySelector('.poo10')
var poo11= document.querySelector('.poo11')
var poo12= document.querySelector('.poo12')
var poo13= document.querySelector('.poo13')
var poo14= document.querySelector('.poo14')
var poo15= document.querySelector('.poo15')
var poo16= document.querySelector('.poo16')

var f31=document.querySelector('.f31')
var f32=document.querySelector('.f32')
var f33=document.querySelector('.f33')
var f34=document.querySelector('.f34')
var f35=document.querySelector('.f35')
var f36=document.querySelector('.f36')
var f37=document.querySelector('.f37')
var f38=document.querySelector('.f38')
var f39=document.querySelector('.f39')
var f310=document.querySelector('.f310')
var f311=document.querySelector('.f311')
var f312=document.querySelector('.f312')
var f313=document.querySelector('.f313')
var f314=document.querySelector('.f314')
var f315=document.querySelector('.f315')
var f316=document.querySelector('.f316')

f31.onmouseover = function(){
    poo1.style.display = 'block'
}
f31.onmouseout = function(){
    poo1.style.display = 'none'
}

f32.onmouseover = function(){
    poo2.style.display = 'block'
}
f32.onmouseout = function(){
    poo2.style.display = 'none'
}



f33.onmouseover = function(){
    poo3.style.display = 'block'
}
f33.onmouseout = function(){
    poo3.style.display = 'none'
}
f34.onmouseover = function(){
    poo4.style.display = 'block'
}
f34.onmouseout = function(){
    poo4.style.display = 'none'
}
f35.onmouseover = function(){
    poo5.style.display = 'block'
}
f35.onmouseout = function(){
    poo5.style.display = 'none'
}
f36.onmouseover = function(){
    poo6.style.display = 'block'
}
f36.onmouseout = function(){
    poo6.style.display = 'none'
}
f37.onmouseover = function(){
    poo7.style.display = 'block'
}
f37.onmouseout = function(){
    poo7.style.display = 'none'
}
f38.onmouseover = function(){
    poo8.style.display = 'block'
}
f38.onmouseout = function(){
    poo8.style.display = 'none'
}
f39.onmouseover = function(){
    poo9.style.display = 'block'
}
f39.onmouseout = function(){
    poo9.style.display = 'none'
}
f310.onmouseover = function(){
    poo10.style.display = 'block'
}
f310.onmouseout = function(){
    poo10.style.display = 'none'
}
f311.onmouseover = function(){
    poo11.style.display = 'block'
}
f311.onmouseout = function(){
    poo11.style.display = 'none'
}
f312.onmouseover = function(){
    poo12.style.display = 'block'
}
f312.onmouseout = function(){
    poo12.style.display = 'none'
}
f313.onmouseover = function(){
    poo13.style.display = 'block'
}
f313.onmouseout = function(){
    poo13.style.display = 'none'
}
f314.onmouseover = function(){
    poo14.style.display = 'block'
}
f314.onmouseout = function(){
    poo14.style.display = 'none'
}
f315.onmouseover = function(){
    poo15.style.display = 'block'
}
f315.onmouseout = function(){
    poo15.style.display = 'none'
}
f316.onmouseover = function(){
    poo16.style.display = 'block'
}
f316.onmouseout = function(){
    poo16.style.display = 'none'
}
var m1 = document.querySelector('.m1')
var m2 = document.querySelector('.m2')
var m3 = document.querySelector('.m3')
var left = 0
m2.onclick = function(){
    left-=1152
    if(left<-1152){
        left=-1152
    }
    m3.style.left = left+'px'
}
m1.onclick = function(){
    left+=1152
    if(left>0){
        left = 0
    }
    m3.style.left =left+ 'px'
}
var img1 = document.querySelector('.img1')
var img11 = 1;

setInterval(function(){
    img11++;
    if(img11 > 5){
        img11 = 1
    }
    img1.src = './imgs/'+img11+'.jpg'

},3000)
var imm3 = document.querySelector('.imm3')
var imm4 = document.querySelector('.imm4')
var imm2 = document.querySelector('.imm2')
imm2.onmouseover = function(){
    imm3.style.display = 'block'
    imm4.style.display = 'block'
}
imm2.onmouseout = function(){
    imm3.style.display = 'none'
    imm4.style.display = 'none'
}


imm3.onclick = function(){
    img11 -= 1
    if(img11 < 1){
        img11 = 5
    }
    img1.src = './imgs/'+img11+'.jpg'
}
imm4.onclick = function(){
    img11 += 1
    if(img11 > 5){
        img11 = 1
    }
    img1.src = './imgs/'+img11+'.jpg'
}
var mei2 = document.querySelector('.mei2')
var mm2 = document.querySelector('.mm2')
var mei3 = document.querySelector('.mei3')
mm2.onmouseover=function(){
    mei3.style.display = 'block';
    mm2.style.backgroundColor = 'white'
    mei2.style.backgroundColor = 'white'
}
mm2.onmouseout = function(){
    mei3.style.display = 'none'
    mm2.style.backgroundColor = ''
}


// 民宿  
var minsu_text = ['【蓝】窗外   天津之眼鼓楼/地中海风海景两居', '【爱巢公寓】时尚临湖投影公寓，近机场，空港肿瘤医院', '海河景温馨公寓/邻海河/开启桥/高铁站/茱莉亚音乐学院/极地海洋馆', '限时特惠【粉色的告白】嘉里汇旁· 地铁大王庄站· 不可做饭', '天津豆荚优格太空舱青年公寓（经济、便捷，卫生、安全、低碳环保）', '【重拾旧梦】大理石高奢摩天轮观景带浴缸', '【重拾旧梦】大理石高奢摩天轮观景带浴缸', '【重拾旧梦】大理石高奢摩天轮观景带浴缸', '【重拾旧梦】大理石高奢摩天轮观景带浴缸', '【重拾旧梦】大理石高奢摩天轮观景带浴缸','【蓝】窗外天津之眼鼓楼/地中海风海景两居'];
var minsu_text1 = ['整套2居室·可住4人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 滨海国际机场地区', '整套1居室·可住2人 | 塘沽商业中心区', '整套2居室·可住4人 | 滨江道/小白楼/五大道周边', '整套1居室·可住1人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 天津站/古文化街/意式风情街', '整套1居室·可住2人 | 天津站/古文化街/意式风情街'];
var minsu_text2 = ['￥248', '￥210', '￥128', '￥288', '￥64', '￥480', '￥210', '￥210', '￥128', '￥128', '￥128'];
var minsu_tupian = ['http://p1.meituan.net/horus/1c6b0657bb90c1797d37d98dd4b0a9e77243204.png@740w_416h_1e_1c', 'https://img.meituan.net/phoenix/b25581a2c18060afe4c46af9d7089c1e416002.jpg@740w_416h_1e_1c', 'http://p0.meituan.net/horus/d376191af613016161f5decd3a7b90e68971964.png@740w_416h_1e_1c', 'https://img.meituan.net/phoenix/dec79692d6a26e9f221945a53201f3da1025232.jpg@740w_416h_1e_1c', 'https://img.meituan.net/phoenix/1248ab76cec26bd887805b41bc18a5d2804047.jpg@740w_416h_1e_1c', 'http://p0.meituan.net/iphoenix/fb118ce33510a45a902748a7e9c62489354068.jpg@740w_416h_1e_1c','http://p0.meituan.net/iphoenix/fb118ce33510a45a902748a7e9c62489354068.jpg@740w_416h_1e_1c','https://p0.meituan.net/iphoenix/ba765098db16265f1a6638f4a891c4e57487890.jpg@740w_416h_1e_1c','https://img.meituan.net/phoenix/d972ed024c501f15546432f385a4dbf12860149.jpg@740w_416h_1e_1c','https://img.meituan.net/phoenix/1098891d61d8140bbde940b3fb068577403082.jpg@740w_416h_1e_1c','https://img.meituan.net/phoenix/102c56cebdb5ffeb6415f7084ba8ccf26051869.jpg@740w_416h_1e_1c' ];
var minsu_tou = ['https://img.meituan.net/avatar/cfe695f98a30b352853d0d28881502ca27555.jpg@200w_200h_1e_1c', 'https://img.meituan.net/avatar/679eaba9b666f647d7aeea50619b544713170.jpg@200w_200h_1e_1c', 'https://img.meituan.net/avatar/7b770e8975cd16334a6303d47d9c10ad30082.jpg@200w_200h_1e_1c', 'https://img.meituan.net/avatar/f8f48092349fb9d637502429b6732c2414020.jpg@200w_200h_1e_1c', 'https://img.meituan.net/avatar/f0a723b408463b7c7869a7830aac150021161.jpg@200w_200h_1e_1c', 'http://p0.meituan.net/phoenix/db81fa6c44a2b4c0e9fb05c2255db689114832.jpg@200w_200h_1e_1c', 'http://p0.meituan.net/phoenix/db81fa6c44a2b4c0e9fb05c2255db689114832.jpg@200w_200h_1e_1c', 'http://p0.meituan.net/phoenix/db81fa6c44a2b4c0e9fb05c2255db689114832.jpg@200w_200h_1e_1c', 'http://p0.meituan.net/phoenix/db81fa6c44a2b4c0e9fb05c2255db689114832.jpg@200w_200h_1e_1c', 'http://p0.meituan.net/phoenix/db81fa6c44a2b4c0e9fb05c2255db689114832.jpg@200w_200h_1e_1c', 'http://p0.meituan.net/phoenix/db81fa6c44a2b4c0e9fb05c2255db689114832.jpg@200w_200h_1e_1c'];

function aa(text, text1, text2, tou, tupian) {
    var recommend = document.querySelector('.recommend ')
    var reco_div3 = document.createElement('div')
    recommend.appendChild(reco_div3)
    reco_div3.className = 'aaa clearfix'
    for (var i = 0; i < 6; i++){
        var reco_div = document.createElement('div');
        var reco_div1 = document.createElement('div');
        var reco_div2 = document.createElement('div');
        var reco_img = document.createElement('img');
        var reco_img1 = document.createElement('img');
        var reco_p = document.createElement('p');
        var reco_p1 = document.createElement('p');
        var reco_p2 = document.createElement('p');
        reco_p.innerHTML= text;
        reco_p1.innerHTML = text1;
        reco_p2.innerHTML = text2;
        reco_img1.src = tou;
        reco_img.src = tupian;
        reco_img.className='img1';
        reco_img1.className='img2';
        reco_div.className = 'minsu';
        reco_div3.appendChild(reco_div);
        reco_div.appendChild(reco_div1);
        reco_div1.append(reco_img,reco_img1);
        reco_div.appendChild(reco_div2);
        reco_div2.append(reco_p,reco_p1,reco_p2);
    }
}

var three = document.querySelector('.reco_top .three');
var l = ['94', '140', '187', '234', '289', '352', '422', '486', '532', '579'];
var chengshi= document.querySelectorAll('.reco_top>span')
for (let j = 0; j < chengshi.length; j++) {
    aa(minsu_text[j],minsu_text1[j],minsu_text2[j],minsu_tou[j],minsu_tupian[j])
    var aaa = document.querySelectorAll('.aaa');
    aaa[0].style.display = 'block';
    chengshi[j].onmouseover = function () {
        three.style.left = l[j] + 'px';
        for (let i = 0; i < aaa.length; i++) {
            if (i != j) {
                aaa[i].style.display = 'none';
            } else {
                aaa[i].style.display = 'block';
            }        
        }
    }
}
